@extends( 'layout.home' )
@section( 'content' )
    <style>
        .result_wrap{border: 0;}
        input[type="button"]{border: 0}
    </style>
    <!--面包屑导航 开始-->
    <div class="crumb_warp">
        <!--<i class="fa fa-bell"></i> 欢迎使用登陆网站后台，建站的首选工具。-->
        <i class="fa fa-home"></i> <a href="{{url( 'info' )}}">首页</a> &raquo; 进入登记
    </div>
    <!--面包屑导航 结束-->

    <!--结果集标题与导航组件 开始-->
    <div class="result_wrap">
        <div class="result_title">
            <h3>快捷操作</h3>
        </div>
        <div class="result_content">
            <div class="short_wrap">
            </div>
        </div>
    </div>
    <!--结果集标题与导航组件 结束-->

    <div class="result_wrap">
        <form>
            {{csrf_field()}}
            <table class="add_tab">
                <tbody>
                <tr>
                    <th><i class="require">*</i>车牌号：</th>
                    <td>
                        <select id="carcity">
                            <option value="">请选择</option>
                            @foreach($carcity as $v)
                                <option value="{{$v['code']}}">{{$v['code']}}</option>
                            @endforeach
                        </select>
                        <span style="font-weight: bold;margin-right: 10px;">·</span>
                        <input type="text" name="plate_num" id="plate_num">
                        <span><i class="fa fa-exclamation-circle yellow"></i>车牌号必须填写</span>
                    </td>
                </tr>
                <tr>
                    <th><i class="require">*</i>车类型：</th>
                    <td>
                        <input type="radio"  name="plate_type" value="1">小车
                        <input type="radio"  name="plate_type" value="2" style="margin-left: 20px;">货车/客车
                    </td>
                </tr>
                <tr>
                    <th><i class="require">*</i>选择车位：</th>
                    <td>
                        <span class="piddiv" style="color: #000;font-size: 14px;"></span>
                        &nbsp;<input type="button" value="请选择" id="getparkingspace"  onclick="pop()">
                        <input type="hidden" id="parkingspace_no" value="" >

                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" value="登记" id="submit">
                        <input type="button" class="back" onclick="history.go(-1)" value="返回">
                    </td>
                </tr>
                </tbody>
            </table>

        </form>
        <div style="width: 50%;margin: 30px auto;">
            <table class="list_tab">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script>
        function pop(){
            var carcity = $("#carcity").val();
            var plate_num = $("input[name='plate_num']").val();
            var judge = true;
            if(carcity&&plate_num){
                $.post("{{url('findrent')}}",{
                    '_token':"{{csrf_token()}}",
                    carcity:carcity,
                    plate_num:plate_num
                },function(data){
                    if(data.code){
                        layer.alert(data.msg);
                        $("#parkingspace_no").val(data.data.parkingspace_no);
                        judge = false;
                    }
                });
            }

            layer.open({
                type: 2,
                title:'请选择车位',
                area: ['850px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: "{{url('getparkingspace')}}"
            });

        }

        $("#submit").click(function(){//点击提交
            var carcity = $("#carcity").val();
            var plate_num = $("input[name='plate_num']").val();
            var plate_type = $("input[name='plate_type']:checked").val();
            var parkingspace_no = $("#parkingspace_no").val();
            if(!carcity||!plate_num||!plate_type||!parkingspace_no){
                layer.msg('请填写完整！');
                return false;
            }
            $.post('{{url('parking')}}',{
                '_token':"{{csrf_token()}}",
                carcity:carcity,
                plate_num:plate_num,
                plate_type:plate_type,
                parkingspace_no:parkingspace_no
            },function(data){
                if(data.code){
                    layer.alert(data.msg);
                    setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
                        window.location.reload();//页面刷新
                    },3000);
                }else{
                    layer.msg(data.msg);
                }
            });
        });

        function getdate(time) {
            var now = new Date(time),
                y = now.getFullYear(),
                m = now.getMonth() + 1,
                d = now.getDate();
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        }

        $("input[name='plate_num']").bind("input propertychange",function(){
            var plate_num = $(this).val();
            var carcity = $("#carcity").val();
            $.post("{{url('rentsearch')}}",{
                '_token':"{{csrf_token()}}",
                'plate_num':plate_num,
                'carcity':carcity,
            },function(data){
                if(data['code']){
                    var h = '';
                    var l = data['msg'].length;
                    h = h + "<tr>";
                    h = h + "<td class='tc' width='30%' rowspan='"+ l +"'>月租车辆</td>";
                    h = h + "<td class='tc' width='20%'>"+ data['msg'][0]['carcity'] + " · "+ data['msg'][0]['plate_num'] + "</td>";
                    h = h + "<td class='tc' width='20%'>"+((data['msg'][0]['plate_type'] == 1)?"小车":"客车/货车")+"</td>";
                    h = h + "<td class='tc' width='20%'><input type='button' id='register' onclick='register(this)' value='登记' carcity='"+ data['msg'][0]['carcity'] +"' plate_num='"+ data['msg'][0]['plate_num'] +"' plate_type='"+ data['msg'][0]['plate_type'] +"'  parkingspace_no='"+ data['msg'][0]['parkingspace_no'] +"'></td>";
                    h = h + "</tr>";
                    if(l>1){
                        for (var i=1;i<l;i++){
                            h = h + "<tr>";
                            h = h + "<td class='tc' width='20%'>"+ data['msg'][i]['carcity'] + " · "+ data['msg'][i]['plate_num'] + "</td>";
                            h = h + "<td class='tc' width='20%'>"+((data['msg'][i]['plate_type'] == 1)?"小车":"客车/货车")+"</td>";
                            h = h + "<td class='tc' width='20%'><input type='button' id='register' onclick='register(this)'  value='登记' carcity='"+ data['msg'][i]['carcity'] +"' plate_num='"+ data['msg'][i]['plate_num'] +"' plate_type='"+ data['msg'][i]['plate_type'] +"' parkingspace_no='"+ data['msg'][i]['parkingspace_no'] +"'></td>";
                            h = h + "</tr>";
                        }
                    }
                    $(".list_tab tbody").html(h);
                }else{
                    $(".list_tab tbody").html("");
                }
            });
        });

        $("#carcity").bind('change',function(){
            var carcity = $(this).val();
            var plate_num = $("#plate_num").val();
            $.post("{{url('rentsearch')}}",{
                '_token':"{{csrf_token()}}",
                'carcity':carcity,
                'plate_num':plate_num
            },function(data){
                if(data['code']){
                    var h = '';
                    var l = data['msg'].length;
                    h = h + "<tr>";
                    h = h + "<td class='tc' width='30%' rowspan='"+ l +"'>月租车辆</td>";
                    h = h + "<td class='tc' width='20%'>"+ data['msg'][0]['carcity'] + " · "+ data['msg'][0]['plate_num'] + "</td>";
                    h = h + "<td class='tc' width='20%'>"+((data['msg'][0]['plate_type'] == 1)?"小车":"客车/货车")+"</td>";
                    h = h + "<td class='tc' width='20%'><input type='button' onclick='register(this)'  id='register' value='登记' carcity='"+ data['msg'][0]['carcity'] +"' plate_num='"+ data['msg'][0]['plate_num'] +"' plate_type='"+ data['msg'][0]['plate_type'] +"' parkingspace_no='"+ data['msg'][0]['parkingspace_no'] +"'></td>";
                    h = h + "</tr>";
                    if(l>1){
                        for (var i=1;i<l;i++){
                            h = h + "<tr>";
                            h = h + "<td class='tc' width='20%'>"+ data['msg'][i]['carcity'] + " · "+ data['msg'][i]['plate_num'] + "</td>";
                            h = h + "<td class='tc' width='20%'>"+((data['msg'][i]['plate_type'] == 1)?"小车":"客车/货车")+"</td>";
                            h = h + "<td class='tc' width='20%'><input type='button' onclick='register(this)' id='register' value='登记' carcity='"+ data['msg'][i]['carcity'] +"' plate_num='"+ data['msg'][i]['plate_num'] +"' plate_type='"+ data['msg'][i]['plate_type'] +"' parkingspace_no='"+ data['msg'][i]['parkingspace_no'] +"'></td>";
                            h = h + "</tr>";
                        }
                    }
                    $(".list_tab tbody").html(h);
                }else{
                    $(".list_tab tbody").html("");
                }
            });
        });


    function register(obj) {
        var thisObj=$(obj);
        var carcity = thisObj.attr('carcity');
        var plate_num = thisObj.attr('plate_num');
        var plate_type = thisObj.attr('plate_type');
        var parkingspace_no = thisObj.attr('parkingspace_no');

        $.post('{{url('parking')}}',{
            '_token':"{{csrf_token()}}",
            carcity:carcity,
            plate_num:plate_num,
            plate_type:plate_type,
            parkingspace_no:parkingspace_no
        },function(data){
            if(data.code){
                layer.alert(data.msg);
                setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
                    window.location.reload();//页面刷新
                },3000);
            }else{
                layer.msg(data.msg);
            }
        });

    }

    </script>
@endsection
